<template>
  <div>
    <div style="margin-bottom: 20px;">
      <el-card shadow="hover" body-style="width:100%;">
        <div style="display: flex">
          <div style="display: flex;align-items:center;margin-right:20px">
            <i class="el-icon-user" />
          </div>
          <div style="display: flex;align-items:center;margin-right:10px">订单编号：</div>
          <el-input v-model="shopOrder.orderNo" style="width: 200px" placeholder="请输入订单编号" clearable />
          <div style="display: flex;align-items:center;margin-left:20px;">
            <i class="el-icon-location-outline" />
          </div>
          <div style="display: flex;align-items:center;margin-left:30px;margin-right:5px ">下单商家：</div>
          <el-input v-model="shopOrder.dianjia" style="width: 200px" placeholder="请输入下单商家" clearable />
          <div style="display: flex;align-items:center;margin-left:20px;">
            <i class="el-icon-loading" />
          </div>
          <div style="display: flex;align-items:center;margin-left:20px;margin-right:10px">支付状态：</div>
          <!--          <el-input v-model="phone" style="width: 200px" placeholder="请输入频率" clearable />-->
          <el-select v-model="shopOrder.status" placeholder="请选择" clearable @change="handleChange">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <div style="padding: 0px 20px;margin-left: 50px">
            <el-button type="primary" icon="el-icon-search" @click="load">查找</el-button>
          </div>
          <div>
            <el-button type="primary" plain icon="el-icon-info" @click="clearInput">清空</el-button>
          </div>
        </div>
      </el-card>
    </div>
    <el-card shadow="hover">
      <el-table :data="shopOrderList" border stripe :header-cell-class-name="'headerBg'" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="ID" width="80" sortable>
          <template scope="scope">
            <span>{{ (pageParams.page - 1) * pageParams.pageSize + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="orderNo" label="订单编号" align="center" />
        <el-table-column prop="orderName" label="订单名称" align="center" />
        <el-table-column prop="shopName" label="下单商家" align="center" />
        <el-table-column prop="prince" label="物料总价格" align="center">
          <template v-slot="{ row }">
            {{ formatPrice(row.prince) }}
          </template>
        </el-table-column>
        <el-table-column prop="count" label="物料总数量" align="center" />
        <!--        <el-table-column prop="status" label="支付状态" align="center" />-->
        <el-table-column prop="status" label="支付状态" align="center">
          <template slot-scope="{ row }">
            <span
              v-if="row.status === '0'"
              style="background-color: #ffcccc; padding: 5px; cursor: pointer"
              @click="startCancelTimer(row)"
            >未支付</span>
            <span v-else-if="row.status === '1'" style="background-color: #ccffcc; padding: 5px; cursor: pointer">已支付</span>
            <span v-else style="padding: 5px;" />
          </template>
        </el-table-column>

        <el-table-column prop="createTime" label="下单时间" align="center" width="200px">
          <template slot-scope="{ row }">
            <i class="el-icon-time" />
            <span style="margin-left: 10px">{{ row.createTime || '--' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="zhhifuTime" label="支付时间" align="center" width="200px">
          <template slot-scope="{ row }">
            <i class="el-icon-time" />
            <span style="margin-left: 10px">{{ row.zhhifuTime || '--' }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="250" align="center">
          <template slot-scope="scope">
            <!--            <el-button type="success" v-if="scope.row.status === '0' && scope.row.shopName != 'admin'"  @click="handleEdit(scope.row)"> 支 付<i class="el-icon-edit" /></el-button>-->
            <el-button
              v-if="scope.row.status === '0' "
              type="success"
              @click="handleEdit(scope.row)"
            > 支 付<i class="el-icon-edit" /></el-button>

            <el-popconfirm
              class="ml-5"
              confirm-button-text="确定"
              cancel-button-text="我再想想"
              icon="el-icon-info"
              icon-color="red"
              title="您确定删除吗？"
              @confirm="deleteById(scope.row)"
            >
              <el-button
                v-if="scope.row.status === '1'"
                slot="reference"
                style="width: 80px"
                type="danger"
              >删 除 <i class="el-icon-remove-outline" /></el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <div style="padding: 10px 0">
        <el-pagination
          :current-page="pageParams.page"
          :page-sizes="[2, 5, 10, 20]"
          :page-size="pageParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageParams.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
      <el-dialog title="提示信息" :visible.sync="isDialog" width="25%">
        <el-form>
          <el-form-item v-model="form.createTime">
            <template>
              <div style="font-size: 14px;color: #666;">剩余支付时间（超时自动关闭）</div>
              <div style="color: #0d8d84;font-weight: bolder" class="time"><i class="el-icon-time" />  {{ min }}分钟 {{ sec }}秒 </div>
            </template>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="isDialog = false">取 消</el-button>
          <el-button type="primary" @click="isDialog = false">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog title="信息" :visible.sync="dialogFormVisible" width="40%" :close-on-click-modal="false">
        <el-form label-width="140px" size="small" style="width: 85%;">
          <el-form-item label="商家名称">
            <el-input v-model="form.username" autocomplete="off" disabled />
          </el-form-item>
          <el-form-item label="打卡位置">
            <el-input v-model="form.location" autocomplete="off" disabled />
          </el-form-item>
          <el-form-item label="打卡时间">
            <el-date-picker v-model="form.dakaTime" disabled type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" />
          </el-form-item>
          <el-form-item label="打卡次数">
            <el-input v-model="form.clockingRecords" autocomplete="off" disabled />
          </el-form-item>
          <el-form-item label="打卡积分">
            <el-input v-model="form.integral" autocomplete="off" disabled />
          </el-form-item>
          <el-form-item label="打卡频率">
            <el-select v-model="form.comments" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'Index',
  data() {
    return {
      isDialog: false,
      options: [{
        value: '0',
        label: '未支付'
      }, {
        value: '1',
        label: '已支付'
      }],
      value: '',
      tableData: {},
      shopOrderList: [],
      // 分页参数
      pageParams: {
        page: 1,
        pageSize: 10,
        total: 0
      },
      shopOrder: {
        dianjia: '',
        shopName: '',
        orderName: '',
        status: '',
        orderNo: '',
        shopOverTime: null
      },
      name: '',
      form: {},
      dialogFormVisible: false,
      multipleSelection: [],
      user: localStorage.getItem('user') ? localStorage.getItem('user') : {},
      day: '',
      hr: '',
      min: '',
      sec: '',
      createTime: null,
      timers: null, // 定时器名称
      names: ''
    }
  },
  created() {

  },
  mounted() {
    this.load()
    this.$nextTick(() => {
      const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms))
      const runCode = async() => {
        await delay(4000)
        this.countdown()
      }
      runCode()
    })
  },
  methods: {
    handleChange(val) {
      console.log('选中的值为：', val)
      this.shopOrder.status = val
      // 在这里可以进行相应的逻辑处理
    },
    // 倒计时
    countdown() {
      const end = Date.parse(new Date(this.overTime))
      const now = Date.parse(new Date())
      const msec = end - now
      // console.warn(this.shopOrder.shopOverTime)
      if (msec < 0) return
      const remainingSec = Math.floor(msec / 1000)
      const remainingMin = Math.floor(remainingSec / 60)
      const remainingHr = Math.floor(remainingMin / 60)
      const remainingDay = Math.floor(remainingHr / 24)

      const hr = remainingHr % 24
      const min = remainingMin % 60
      const sec = remainingSec % 60

      this.day = remainingDay
      this.hr = hr > 9 ? hr : '0' + hr
      this.min = min > 9 ? min : '0' + min
      this.sec = sec > 9 ? sec : '0' + sec

      const that = this
      if (remainingSec > 0) {
        clearInterval(this.timer)
        this.timer = setInterval(() => {
          that.countdown()
        }, 1000)
      } else {
        clearInterval(this.timer)
      }
    },
    startCancelTimer(row) {
      // 提示用户该订单将于15分钟后取消
      this.isDialog = true
      this.createTime = row.createTime
      this.overTime = row.overTime
      console.error(this.createTime)
      console.warn(this.overTime)
    },
    formatPrice(prince) {
      return `${prince} 元 `
    },
    // 删除这条信息
    async deleteById(row) {
      this.$confirm('删除这条订单信息后后无法回撤, 是否继续?', '删除打卡信息?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          const res = await this.$API.shopOrder.reqdeleteById(row)
          if (res.code === 200) {
            this.$message.success('删除成功')
            this.load()
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
          this.load()
        })
    },
    clearInput() {
      this.shopOrder.orderNo = ''
      this.shopOrder.dianjia = ''
      this.shopOrder.status = ''
      this.load()
    },
    async load() {
      // const selectedOption = this.options.find(option => option.value === this.comment.comments)
      // const selectedLabel = selectedOption ? selectedOption.label : ''
      // console.log(selectedLabel)
      // console.log(this.comment)
      // this.comment.comments = selectedLabel
      this.shopOrder.shopName = this.user
      const res = await this.$API.shopOrder.reqSelectByPage(this.pageParams, this.shopOrder)
      if (res.code === 200) {
        this.pageParams.total = res.data.total
        // this.shopOrder.shopName = res.data.shopName
        this.names = res.data.shopName
        this.shopOrderList = res.data.shopOrderVoList
      }
    },

    async save() {
      const selectedOption = this.options.find(option => option.value === this.form.comments)
      const selectedLabel = selectedOption ? selectedOption.label : this.form.comments
      this.tableData.comments = selectedLabel
      const res = await this.$API.sign.reqUpdateMessage({ ...this.tableData })
      if (res.code === 200) {
        this.$message({
          type: 'success',
          message: '保存成功'
        })
        this.dialogFormVisible = false
        this.load()
      }
    },

    handleEdit(row) {
      this.form = JSON.parse(JSON.stringify(row))
      console.log(this.form)
      this.tableData = row
      this.dialogFormVisible = true
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },

    handleSizeChange(pageSize) {
      this.pageParams.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {
      this.pageParams.page = pageNum
      this.load()
    }
  }

}
</script>

<style >
.headerBg {
  background: #eee!important;
}
</style>

